<template>
	<div class="h-100 position-relative" v-loading.fullscreen.lock="fullscreenLoading">
		<el-tabs v-model="activeName" class="d-flex flex-column h-100">
			<el-tab-pane label="用户列表" name="first" class="d-flex flex-column h-100">
				<div class="search w-25">
					<el-input placeholder="请输入用户名" size="small" v-model="searchName">
						<el-button slot="append" type="primary" icon="el-icon-search" @click.stop="search"></el-button>
					</el-input>
				</div>
				<div class="table_list">
					<el-table :data="tableData" stripe style="width: 100%" size="small">
						<el-table-column type="index" width="50"></el-table-column>
						<el-table-column prop="userName" label="用户名"></el-table-column>
                        <el-table-column prop="phone" label="手机号码"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column label="有效期" width="250">
                            <template #default="{row}">
                                {{row.startTime}} - {{row.endTime}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="businessCode" label="商户号">
                            <template slot-scope="{row}">
                                <el-tooltip effect="dark" :content="row.businessCode" placement="left">
                                    <el-button type="text" @click="showBusinessCode(row)">{{row.businessCode}}</el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="{row}">
                                <el-checkbox class="ml-3" :true-label="1" :false-label="0"
                                    v-model="row.status" @change="changeToUsing(row)" :disabled="checkPermission(2)">启用</el-checkbox>
                            </template>
                        </el-table-column>
						<el-table-column label="操作" width="300">
							<template slot-scope="scope">
								<el-button size="mini" @click="handleToEdit(scope.row)" :disabled="checkPermission(2)">编辑</el-button>
								<el-button size="mini" type="danger" @click="handleToDelete(scope.$index, scope.row)" :disabled="checkPermission(1)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination class="pagination pt-2 pb-2 justify-content-end" background layout="prev, pager, next"
					:total="total"></el-pagination>
			</el-tab-pane>
		</el-tabs>

		<el-button type="primary" class="position-absolute addFlat" size="small" icon="el-icon-plus"
			@click="dialogNewUserVisible=true" :disabled="checkPermission(0)">添加用户</el-button>

		<el-dialog title="添加用户" :visible.sync="dialogNewUserVisible" top="5vh" width="750px" append-to-body>
			<UserAdd v-if="dialogNewUserVisible" @userAddEvent="userAddEventListener"></UserAdd>
			<!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogNewUserVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="dialogNewUserVisible = false" size="small">确 定</el-button>
			</span> -->
		</el-dialog>

        <el-dialog title="编辑用户" :visible.sync="dialogEditUserVisible" width="500px" append-to-body top="5vh">
            <UserEdit v-if="dialogEditUserVisible" :data="editRow" @userEditEvent="userEditEventListener"></UserEdit>
            <!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogEditUserVisible = false" size="small">取 消</el-button>
				<el-button type="primary" @click="dialogEditUserVisible = false" size="small">确 定</el-button>
			</span> -->
        </el-dialog>

        <el-dialog title="二维码" :visible.sync="dialogQRcodeVisible" append-to-body top="5vh" width="350px">
            <div id="qrcode" ref="qrcode"></div>
        </el-dialog>

	</div>
</template>

<script>
import UserAdd from './dialog/UserAdd.dialog';
import UserEdit from './dialog/UserEdit.dialog';
import BtnOperateMixin from './../../mixins/btnOperate.mixin';

	export default {
        name: 'UserList',
        mixins: [BtnOperateMixin],
        components: { UserAdd, UserEdit },
		data() {
			return {
				activeName: 'first',
                dialogNewUserVisible: false,
                dialogEditUserVisible: false,
                dialogQRcodeVisible: false,
                tableData: [],
                
                pageIndex: 1,
                pageSize: 20,
                total: 0,
                searchName: '',

                editRow: null,
                fullscreenLoading: false
			}
        },
        created(){
            this.fetchRemote();
        },
		methods: {
            fetchRemote(){
                this.$svHttp.httpGet(this.$svHttp.Api.uList, {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    userName: this.searchName
                }).then(response=>{
                    if(response) {
                        let { result } = response,
                            { records, total } = result;
                        Array.isArray( records ) && (this.tableData = records);
                        this.total = total;
                    }
                });
            },
            userAddEventListener(val){
                if( val === false ) this.dialogNewUserVisible = false;
                else {
                    this.dialogNewUserVisible = false;
                    this.fetchRemote();
                }
            },
            userEditEventListener(val){
                if( val === false ) this.dialogEditUserVisible = false;
                else {
                    this.dialogEditUserVisible = false;
                    this.fetchRemote();
                }
            },
            search(){
                this.pageIndex = 1;
                this.fetchRemote();
            },
			handleToEdit(row) {
                this.editRow = JSON.parse(JSON.stringify(row));
                this.dialogEditUserVisible = true;
			},
			handleToDelete(index, item) {
				this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
                    let url = this.$svHttp.Api.uDelete,
                        userNo = item.userNo
                    this.$svHttp.httpDelete(url + userNo).then(response=>{
                        if( response ) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.fetchRemote();
                        }
                    });
				});
			},
			changeToUsing(row) {
                this.fullscreenLoading = true;
                this.$svHttp.httpPost(this.$svHttp.Api.uEdit, {
                    userNo: row.userNo,
                    status: row.status
                }).then(response=>{
                    this.fullscreenLoading = false;
                    if( response ) {
                       this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    }
                });
            },
            
            showBusinessCode(row){
                this.dialogQRcodeVisible = true;
                this.$nextTick(()=>{
                    $(this.$refs.qrcode).empty().qrcode({
                        render: "canvas",
                        text: row.code
                    });
                });
            }
		}
	}

</script>

<style lang="scss" scoped>
	.search {
		height: 40px;
	}

	.table_list {
		overflow: auto;
	}

	.addFlat {
		top: 4px;
		right: 175px;
	}

    #qrcode{
        height: 300px;
        text-align: center;
    }
</style>
